<template>
	<view class="pageBox">
		<view class="topFixed">
			<uni-nav-bar height="88rpx" title="积分排行" left-icon="left" @clickLeft="$back()" color="#000" :border="false"
				statusBar backgroundColor="transparent">
			</uni-nav-bar>
			<view class="flex-row flex-center " style="width: 100%;">
				<view class="flex-column">
					<image style="width: 293.31rpx;height: 46.08rpx;margin-bottom: 20rpx;"
						src="@/static/common/title.png"></image>
					<view class="" style="font-size: 28rpx;color: #0C2666;">
						开启超值回馈之旅的指南
					</view>
				</view>
				<image style="width: 244rpx;height: 168rpx;margin-left: 50rpx;" src="@/static/common/icon1.png">
				</image>
			</view>
			<view class="tabsBox flex-between flex-center">
				<view class="tabsItem " :class="{on:tabIndex==0}" @click="tabsChange({index:0,value:rankType[0]})">日榜
				</view>
				<view class="tabsItemX "></view>
				<view class="tabsItem" :class="{on:tabIndex==1}" @click="tabsChange({index:1,value:rankType[1]})">周榜
				</view>
				<view class="tabsItemX"></view>
				<view class="tabsItem" :class="{on:tabIndex==2}" @click="tabsChange({index:2,value:rankType[2]})">月榜
				</view>
			</view>
		</view>
		<mescroll-body :sticky="true" ref="mescrollRef" :top="mescroll_top" :bottom="mescroll_bottom"
			@init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
			<view class="integralRankContentBox">
				<!-- <view class="integralRankTopBox">
					<view class="rankTopBox">
						<view class="rankTopItem r2">
							<view class="top">
								<template v-if="dataList.rows.length>1">
									<view class="integralRankName u-line-1">{{dataList.rows[1].name}}</view>
									<image v-if="!dataList.rows[1].avatar" class="integralRankImg"
										src="@/static/home/useImg.png" mode="scaleToFill">
									</image>
									<image v-else class="integralRankImg" :src="dataList.rows[1].avatar"
										mode="scaleToFill">
									</image>
								</template>
							</view>
							<view class="rank2Box">
								<view class="text" v-if="dataList.rows.length>1">{{dataList.rows[1].totalPoints}}</view>
								<image class="rank2Img" src="@/static/common/rank2.png"></image>
							</view>
						</view>
						<view class="rankTopItem r1">
							<view class="top">
								<template v-if="dataList.rows.length>0">
									<view class="integralRankName u-line-1">{{dataList.rows[0].name}}</view>
									<image v-if="!dataList.rows[0].avatar" class="integralRankImg"
										src="@/static/home/useImg.png" mode="scaleToFill">
									</image>
									<image v-else class="integralRankImg" :src="dataList.rows[0].avatar"
										mode="scaleToFill">
									</image>
								</template>
							</view>
							<view class="rank1Box">
								<view class="text" v-if="dataList.rows.length>0">{{dataList.rows[0].totalPoints}}</view>
								<image class="rank1Img" src="@/static/common/rank1.png"></image>
							</view>
						</view>
						<view class="rankTopItem r3">
							<view class="top">
								<template v-if="dataList.rows.length>2">
									<view class="integralRankName u-line-1">{{dataList.rows[2].name}}</view>
									<image v-if="!dataList.rows[2].avatar" class="integralRankImg"
										src="@/static/home/useImg.png" mode="scaleToFill">
									</image>
									<image v-else class="integralRankImg" :src="dataList.rows[2].avatar"
										mode="scaleToFill">
									</image>
								</template>
							</view>
							<view class="rank3Box">
								<view class="text" v-if="dataList.rows.length>2">{{dataList.rows[2].totalPoints}}</view>
								<image class="rank3Img" src="@/static/common/rank3.png"></image>
							</view>
						</view>
					</view>
				</view>
				 -->
				<view class="integralRankContent">
					<template>
						<template v-for="(item,index) in dataList.rows">
							<view class="integralRankRow" :key="index">
								<view class="left">
									<image style="width: 48rpx;height: 48rpx;margin-left: -15rpx;margin-right: 10rpx;" v-if="index==0"
										src="@/static/common/rank1.png"></image>
									<image style="width: 48rpx;height: 48rpx;margin-left: -15rpx;margin-right: 10rpx;" v-if="index==1"
										src="@/static/common/rank2.png"></image>
									<image style="width: 48rpx;height: 48rpx;margin-left: -15rpx;margin-right: 10rpx;" v-if="index==2"
										src="@/static/common/rank3.png"></image>
									<view class="rankNum" v-if="index>2">{{index+1}}</view>
									<image v-if="!item.avatar" class="integralRankImg1" src="@/static/home/useImg.png"
										mode="scaleToFill">
									</image>
									<image v-else class="integralRankImg1" :src="item.avatar" mode="scaleToFill">
									</image>
									<view class="integralRankName">{{item.name}}</view>
								</view>
								<view class="right">积分{{item.totalPoints||0}}</view>
							</view>
						</template>
					</template>
				</view>
			</view>
		</mescroll-body>
		<view class="myRankBox" v-if="dataList.rows.length>0">
			<view class="integralRankRow">
				<view class="left">
					<view class="rankNum">{{dataList.rows[0].ownerEntryVo.rank}}</view>
					<image v-if="!dataList.rows[0].ownerEntryVo.avatar" class="integralRankImg1"
						src="@/static/home/useImg.png" mode="scaleToFill">
					</image>
					<image v-else class="integralRankImg1" :src="dataList.rows[0].ownerEntryVo.avatar"
						mode="scaleToFill">
					</image>
					<view class="integralRankName">{{dataList.rows[0].ownerEntryVo.name}}</view>
				</view>
				<view class="right">积分{{dataList.rows[0].ownerEntryVo.totalPoints}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		integralLogExamples
	} from "@/api/goods.js"
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
	import * as systemApi from "@/api/system.js"
	import * as integralLogApi from "@/api/integralLog.js"
	let integralRecord_Search = {
		endTime: '',
		search: '',
		startTime: '',
		status: -2,
	}
	export default {
		mixins: [MescrollMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		// components: {
		// 	searchRow
		// },
		data() {
			return {
				dataInfo: {
					integral: 0
				},
				tabsStyle: {
					height: '88rpx',
					boxSizing: 'border-box'
				},
				tabsAStyle: {
					color: '#0138D2'
				},
				tabs: [{
						name: '日榜',
						id: 'daily'
					},
					{
						name: '周榜 ',
						id: 'weekly'
					},
					{
						name: '月榜',
						id: 'monthly'
					},

				],
				tabIndex: 0,
				tabIndexOld: 0,
				options: {},
				mescroll_top: '176rpx',
				mescroll_bottom: '138rpx',
				downOption: {
					auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 8 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					textNoMore: '--这里是底线--',
					empty: {
						tip: '暂无' // 提示
					}
				},
				dataList: {
					records: [],
					rows: [],
					pages: 0,
					size: 0,
					total: 0,
					current: 0
				}, //列表数据
				rankType: ['daily', 'weekly', 'monthly'],
				listObj: {
					type: 'daily',
				},
				canReset: false,
				dicts: {
					consumption_type: {}
				},
				dictList: {
					consumption_type: []
				},
			}
		},
		mounted() {
			const that = this
			// // #ifdef MP
			// uni.getSystemInfo({
			// 	success: function(res) {
			// 		that.mescroll_top = 88 + 88 + res.statusBarHeight * 2 + 'rpx'
			// 	}
			// })
			// // #endif
		},
		onLoad(options) {
			this.options = options
		},
		onShow() {
			// that.canReset && that.getData()
			// that.canReset = true
			const query = uni.createSelectorQuery().in(this);
			this.$nextTick(() => {
				query.select(".topFixed")
					.boundingClientRect((data) => {
						console.log("得到布局位置信息" + JSON.stringify(data));
						console.log("节点离页面顶部的距离为" + data.top);
						this.mescroll_top = data.height * 2 + 'rpx'
					})
					.exec();
			})

		},
		methods: {
			goto(url, data) {
				this.$navTo(`pages/${url}`, data)
			},
			//手动刷新
			getData() {
				let curMescroll = this.$refs.mescrollRef.mescroll
				curMescroll && curMescroll.resetUpScroll()
				curMescroll && curMescroll.scrollTo(0, 0)
			},
			tabsChange(e) {
				uni.$u.throttle(() => {
					this.tabIndexOld = this.tabIndex
					this.tabIndex = e.index
					this.listObj.type = e.value
					// uni.setStorageSync('integralRecord_Search', JSON.stringify({
					// 	integralType: this.listObj.integralType,
					// }))
					this.getData()
					this.downCallback()
				}, 500)
			},
			/*下拉刷新的回调 */
			downCallback(page) {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				const that = this
				if (that.$store.getters.token) {
					this.getDataList({
						pageNum: page.num,
						pageSize: page.size,
						...that.listObj
					}).then(list => {
						const curPageLen = list.rows.length
						const totalSize = list.total
						that.mescroll.endBySize(curPageLen, totalSize)
					}).catch(err => {
						that.mescroll.endErr()
					})
				} else {
					that.mescroll.endBySize(0, 0)
					return
				}
			},
			/**
			 * @param {Object} page 页码
			 */
			getDataList(pageObj) {
				const that = this
				return new Promise((resolve, reject) => {
					integralLogExamples(pageObj).then((data) => {
						let dataList = JSON.parse(JSON.stringify(that.dataList))
						dataList.pageSize = pageObj.pageSize
						dataList.pageNum = pageObj.pageNum
						dataList.total = data.total
						dataList.pages = Math.ceil(data.total / dataList.pageSize)
						// 合并新数据
						const newList = data.rows
						// 如果是第一页需手动制空列表
						if (pageObj.pageNum == 1) dataList.rows = []
						// 合并新数据
						dataList.rows = dataList.rows.concat(newList)
						that.dataList = dataList
						resolve(that.dataList)
					}).catch(reject)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/pages/integral/integralScss.scss";



	.pageBox {
		// background-color: #F4F7FF;
		background-image: url('~@/static/common/bg.png');

		.topFixed {
			position: fixed;
			width: 100%;
			z-index: 9999;
			// background: linear-gradient(to right, #6FA9FF 100%, #6FA9FF 81%);
		}

		.tabsBox {
			padding: 0 86rpx;
			box-sizing: border-box;
			background: #fff;
			width: 690rpx;
			height: 124rpx;
			margin: 0 30rpx;
			overflow: hidden;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-bottom: 24rpx;

			.tabsItemX {
				border: 2rpx solid #fff;
				height: 100%;
			}

			.tabsItem {
				// width: 33.333%;
				height: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #000;
				font-family: PingFang SC, PingFang SC;
				box-sizing: border-box;

				&.on {
					font-size: 28rpx;
					color: #333333;
					background-color: #FFFFFF;
					border-bottom: 2px solid #1890FF;
				}
			}
		}

		.myRankBox {
			width: 100%;
			height: 138rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
		}

		.integralRankRow {
			margin: 0 30rpx;
			box-sizing: border-box;
			width: 690rpx;
			padding: 20rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			.left {
				display: flex;
				align-items: center;


				.rankNum {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #FB4F49;
					flex-shrink: 0;
					margin-right: 28rpx;
				}

				.integralRankImg1 {
					width: 72rpx;
					height: 72rpx;
					margin: 0 22rpx;
					border-radius: 50%;
					margin-left: 0;
					

				}

				.integralRankName {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #1D2129;
				}
			}

			.right {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 34rpx;
				color: #1D2129;
				flex-shrink: 0;
			}
		}

		.integralRankContentBox {
			.integralRankContent {
				.integralRankRow {
					margin-bottom: 30rpx;
				}
			}

			.integralRankTopBox {
				background: linear-gradient(to right, #6FA9FF 100%, #6FA9FF 81%);
				margin-bottom: 30rpx;
				padding-top: 30rpx;

				.rankTopBox {
					display: flex;
					align-items: flex-end;
					justify-content: center;

					.rankTopItem {

						.top {
							min-height: 150rpx;
							text-align: center;
							margin-bottom: -16px;
							position: relative;
							z-index: 2;

							.integralRankName {
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 32rpx;
								color: #FFFFFF;
								margin-bottom: 16rpx;
							}

							.integralRankImg {
								width: 144rpx;
								height: 144rpx;
								border-radius: 50%;
								overflow: hidden;
							}
						}
					}

					.rank1Box,
					.rank2Box,
					.rank3Box {
						box-sizing: border-box;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 28rpx;

						.text {
							position: relative;
							z-index: 2;
							line-height: 48rpx;
							text-align: center;
						}
					}

					.rank1Box {

						color: #C92E00;
						padding-top: 68rpx;
						position: relative;
						width: 246rpx;
						height: 280rpx;


					}

					.rank2Box {
						color: #BE4F02;
						padding-top: 46rpx;
						position: relative;
						width: 230rpx;
						height: 220rpx;


					}

					.rank3Box {
						width: 228rpx;
						height: 220rpx;
						color: #006C48;
						padding-top: 48rpx;
						position: relative;
					}

					.rank2Img {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 230rpx;
						height: 220rpx;
					}

					.rank1Img {
						width: 246rpx;
						height: 280rpx;
						position: absolute;
						bottom: 0;
						left: 0;
					}

					.rank3Img {
						width: 228rpx;
						height: 220rpx;
						position: absolute;
						bottom: 0;
						left: 0;
					}
				}
			}


		}
	}
</style>